<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗页面</title>
		<link rel="stylesheet" href="../css/base.css"/>
		<link rel="stylesheet" href="../css/button.css"/>
		<link rel="stylesheet" href="../css/dialog.css"/>
	</head>
	<body>
		<div class="main_body">
			<button class="button blue" onclick="tanchu()">点击弹窗</button>
		</div>
		
		
		<div class="dialog" id="dialog">
			<div class="dialog_body">
				<div class="dialog_head">
					<div class="dialog_title">
						<span></span>
					</div>
					<div class="dialog_close">
						<span id="dialogclose" >
							<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355"><path d="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z" p-id="3356"></path></svg>
						</span>
					</div>
				</div>
				<div class="dialog_main_body">
					
				</div>
				<div class="dialog_bottom">
					<div class="dialog_button">
						<button class="button blue small">确认</button>
						<button class="button small">取消</button>
					</div>
				</div>
			</div>
			<div class="dialog_pane"></div>
		</div>
		
		
		<script>
			initDialog();
			function initDialog(){
				let node=createDialog();
				node.dialog.appendChild(node.dialog_body);
				node.dialog.appendChild(node.dialog_dialog_pane);
				
				node.dialog_body.appendChild(node.dialog_head);
				node.dialog_body.appendChild(node.dialog_main_body);
				node.dialog_body.appendChild(node.dialog_bottom);
				
				node.dialog_head.appendChild(node.dialog_title);
				node.dialog_head.appendChild(node.dialog_close);
				
				node.dialog_close.appendChild(node.close_span);
				let close_span_svg=createCloseSvg();
				node.close_span.appendChild(close_span_svg);
				
				node.dialog_bottom.appendChild(node.dialog_button);
				node.dialog_button.appendChild(node.button_enter);
				node.dialog_button.appendChild(node.button_close);
				
				document.body.appendChild(node);
			}
			
			function createDialog(){
				let dialog_node={
					'dialog':createNode('DIV','dialog');,
					'dialog_body':createNode('DIV','dialog_body'),
					'dialog_head':createNode('DIV','dialog_head'),
					'dialog_title':createNode('DIV','dialog_title'),
					'title_span':createNode('SPAN'),
					'dialog_close':createNode("DIV","dialog_close"),
					'close_span':createNode('SPAN'),
					'dialog_main_body':createNode("DIV","dialog_main_body"),
					'dialog_bottom':createNode("DIV","dialog_bottom"),
					'dialog_button':createNode("DIV","dialog_button"),
					'dialog_pane':createNode("DIV","dialog_pane"),
					'button_enter':createNode('BUTTON','button','blue','small'),
					'button_close':createNode('BUTTON','button','small')
				}
				return dialog_node;
			}
			
			function createCloseSvg(){
				 const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
				svgElement.setAttribute("class", "icon");
				svgElement.setAttribute("style", "width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden;");
				svgElement.setAttribute("viewBox", "0 0 1024 1024");
				svgElement.setAttribute("version", "1.1");
				svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
				svgElement.setAttribute("p-id", "3355");
			
				// 创建 <path> 元素，设置路径信息
				const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
				pathElement.setAttribute("d", "M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z");
				pathElement.setAttribute("p-id", "3356");
			
				// 将 <path> 元素添加到 <svg> 元素中
				svgElement.appendChild(pathElement);
				return svgElement;
			}
			
			function createTextNode(text){
				var newNode=document.createTextNode(text);
				return newNode;
			}
			
			function createNode(tagName,className,className2,className3){
				var newNode = document.createElement(tagName);
				if(className){
					newNode.classList.add(className);
				}
				if(className2){
					newNode.classList.add(className2);
				}
				if(className3){
					newNode.classList.add(className3);
				}
				return newNode;
			}
			
			document.getElementById('dialogclose').addEventListener('click',function(e){
				document.getElementById("dialog").style.visibility="hidden";
			});
			
			function tanchu(){
				document.getElementById("dialog").style.visibility="visible";
			}
		</script>
	</body>
</html>